const stats = new Stats()
stats.showPanel(0)
document.body.appendChild(stats.dom)

const setting = {
    symmetry: 6,
    color: 90,
    strokeWeight: 4,
}

const gui = new dat.GUI({ width: 320 })
const folder = gui.addFolder('基础')
folder.open()
const c1 = folder.add(setting, 'symmetry', 2, 16, 1)
const c2 = folder.add(setting, 'color', 0, 100, 1)
const c3 = folder.add(setting, 'strokeWeight', 4, 20, 1)

function setup() {
    createCanvas(innerWidth, innerHeight)
    frameRate(60)
    colorMode(HSB, 100)
    strokeCap(ROUND)
    strokeJoin(ROUND)
    background(0)
}

function draw() {
    stats.begin()

    stroke(setting.color, 100, 100)
    strokeWeight(setting.strokeWeight)

    translate(width / 2, height / 2);

    if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
        let mx = mouseX - width / 2;
        let my = mouseY - height / 2;
        let pmx = pmouseX - width / 2;
        let pmy = pmouseY - height / 2;
        const angle = 2 * PI / setting.symmetry
        if (mouseIsPressed) {
            for (let i = 0; i < setting.symmetry; i++) {
                rotate(angle)
                line(pmx, pmy, mx, my)
            }
        }
    }

    stats.end()
}
